<template>
    <div class="workManagement">
        <div class="contnetTopCardStyle">
            <div class="topLeft">
                <Button type="primary" shape="circle">新增任务</Button>
                <Button type="primary" shape="circle">编辑任务</Button>
                <Button type="primary" shape="circle">删除任务</Button>
            </div>
            <div class="topRight">
                <Select v-model="workStatusModel" style="width:200px">
                    <Option v-for="item in workStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
                <Button type="primary" shape="circle">搜索</Button>
                <Button type="primary" shape="circle">重置</Button>
            </div>
        </div>
        <div class="contentCardStyle">
            <Tabs value="nowWork">
                <TabPane label="当前任务" name="nowWork">
                    <Table :columns="nowColumns" :data="nowData" :loading="nowLoading">
                        <template #action="{ row, index }">
                            <div style="display: flex;align-items: center;">
                                <Button type="text" size="small" class="ivu-table-active-margin ivu-table-active-color"
                                    @click="fnView(index)">查看</Button>
                                <Button type="text" size="small" style="margin-right: 5px;color: red;"
                                    @click="fnSuspend(index)" v-if="row.taskStatus == 1">暂停</Button>
                                <Button type="text" size="small" class="ivu-table-active-margin ivu-table-active-color"
                                    @click="fnBegin(index)" v-else>开始</Button>
                                <Button type="text" size="small" class="ivu-table-active-margin ivu-table-active-color"
                                    @click="fnStop(index)">暂停</Button>
                                <div style="display: flex;flex-direction: column;">
                                    <Icon type="md-arrow-dropup" size="20" class="hover-pointer ivu-table-active-color"
                                        @click="handleMoveUp(row)" />
                                    <Icon type="md-arrow-dropdown" size="20" class="hover-pointer ivu-table-active-color"
                                        @click="handleMoveDown(row)" />
                                </div>
                            </div>
                        </template>
                    </Table>
                    <div class="tableFoot">
                        <div class="pageRecord promptText">
                            共 {{ nowPageTotal }} 条记录 第 {{ nowPageChangeCurrent }}/4 页
                        </div>
                        <div>
                            <Page :total="nowPageTotal" :page-size="nowPageSize" :page-size-opts="PageSizeOpts" show-sizer
                                show-elevator placement="top" @on-change="nowPageChange" />
                        </div>
                    </div>
                </TabPane>
                <!-- 历史任务 -->
                <TabPane label="历史任务" name="historyWork">
                    <Table :columns="historyColumns" :data="historyData" :loading="historyLoading">
                        <template #action="{ row, index }">
                            <div style="display: flex;align-items: center;">
                                <Button type="text" size="small" class="ivu-table-active-margin ivu-table-active-color"
                                    @click="fnView(index)">查看</Button>
                                <Button type="text" size="small" class="ivu-table-active-margin ivu-table-active-color"
                                    @click="fnSuspend(index)">删除</Button>
                                <div style="display: flex;flex-direction: column;">
                                    <Icon type="md-arrow-dropup" size="20" class="hover-pointer ivu-table-active-color"
                                        @click="handleMoveUp(row)" />
                                    <Icon type="md-arrow-dropdown" size="20" class="hover-pointer ivu-table-active-color"
                                        @click="handleMoveDown(row)" />
                                </div>
                            </div>
                        </template>
                    </Table>
                    <div class="tableFoot">
                        <div class="pageRecord promptText">
                            共 {{ historyTotal }} 条记录 第 {{ historyPageChangeCurrent }}/4 页
                        </div>
                        <div>
                            <Page :total="historyTotal" :page-size="historyPageSize" :page-size-opts="PageSizeOpts"
                                show-sizer show-elevator placement="top" @on-change="historyPageChange" />
                        </div>
                    </div>
                </TabPane>

            </Tabs>

        </div>
    </div>
</template>

<script>
import { formatTimestamp } from '@/utils/util'
export default {
    data() {
        return {
            // 当前任务
            nowPageTotal: 100,
            nowPageSize: 10,
            nowPageChangeCurrent: 1,
            nowColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: "序号",
                    width: 100,
                    align: 'center'
                },
                {
                    title: '任务名称',
                    key: 'taskName',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '任务状态',
                    key: 'taskStatus',
                    width: 200,
                    align: 'left',
                    render: (h, params) => {
                        const status = params.row.taskStatus;
                        if (status === 0) {
                            return h('span', '等待开始');
                        } else if (status === 1) {
                            return h('span', '正在运行');
                        } else if (status === 2) {
                            return h('span', '任务停止');
                        } else if (status === 3) {
                            return h('span', '暂停');
                        } else if (status === 4) {
                            return h('span', '任务完成');
                        } else if (status === 5) {
                            return h('span', '故障');
                        }
                    }
                },
                {
                    title: '任务进度',
                    key: 'taskProgress',
                    width: 200,
                    render: (h, params) => {
                        const progress = params.row.taskProgress;
                        const status = params.row.taskStatus;
                        let propsStatus = "normal";
                        if (status === 5) {
                            propsStatus = "wrong"
                        } else if (progress >= 100) {
                            propsStatus = "success"
                        } else {
                            propsStatus = "normal";
                        }
                        return h('Progress', {
                            props: {
                                percent: progress,
                                status: propsStatus
                            }
                        });
                    }
                },
                {
                    title: '计算速度',
                    key: 'computationSpeed',
                    width: 120,
                    render: (h, params) => {
                        const speed = params.row.computationSpeed;
                        if (speed > 0) {
                            return h('span', `${speed} /s`);
                        } else {
                            return h('span', `${speed}`);
                        }
                    }
                },
                {
                    title: '提交时间',
                    key: 'submissionTime',
                    width: 180,
                    render: (h, params) => {
                        const time = params.row.submissionTime;
                        return h('span', formatTimestamp(time, "YYYY:MM:DD HH:mm:ss"));
                    }
                },
                {
                    title: '告警运行时间',
                    key: 'alarmRunningTime',
                    width: 180,
                    render: (h, params) => {
                        const time = params.row.alarmRunningTime;
                        const status = params.row.taskStatus;
                        // 定义样式对象
                        const styleObj = {
                            color: status === 5 ? 'red' : '',
                        };
                        return h('span', { style: styleObj }, formatTimestamp(time, "YYYY:MM:DD HH:mm:ss"));
                    }
                },
                {
                    title: '预计运行时间',
                    key: 'estimatedRunningTime',
                    width: 150,
                    render: (h, params) => {
                        const speed = params.row.estimatedRunningTime;
                        if (speed > 0) {
                            return h('span', `${speed} /s`);
                        } else {
                            return h('span', `${speed}`);
                        }
                    }
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: 'left'
                }

            ],
            nowData: [
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 0,
                    taskProgress: 60,
                    computationSpeed: 10,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 1639566488000,
                    estimatedRunningTime: 0,

                },
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 5,
                    taskProgress: 10,
                    computationSpeed: 0,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 1639566488000,
                    estimatedRunningTime: 10,
                },
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 1,
                    taskProgress: 10,
                    computationSpeed: 0,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 1639566488000,
                    estimatedRunningTime: 10,
                },
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 1,
                    taskProgress: 10,
                    computationSpeed: 0,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 1639566488000,
                    estimatedRunningTime: 10,
                },
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 1,
                    taskProgress: 10,
                    computationSpeed: 0,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 1639566488000,
                    estimatedRunningTime: 10,
                }
            ],
            nowLoading: false,
            //历史任务 
            historyTotal: 50,
            historyPageSize: 10,
            historyPageChangeCurrent: 1,
            historyColumns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: "序号",
                    width: 100,
                    align: 'center'
                },
                {
                    title: '任务名称',
                    key: 'taskName',
                    width: 300,
                    align: 'left'
                },
                {
                    title: '任务状态',
                    key: 'taskStatus',
                    width: 200,
                    align: 'left',
                    render: (h, params) => {
                        const status = params.row.taskStatus;
                        if (status === 0) {
                            return h('span', '等待开始');
                        } else if (status === 1) {
                            return h('span', '正在运行');
                        } else if (status === 2) {
                            return h('span', '任务停止');
                        } else if (status === 3) {
                            return h('span', '暂停');
                        } else if (status === 4) {
                            return h('span', '任务完成');
                        } else if (status === 5) {
                            return h('span', '故障');
                        }
                    }
                },
                {
                    title: '任务警告',
                    key: 'taskWarning',
                    width: 200,
                    render: (h, params) => {
                        const taskWarning = params.row.taskWarning;
                        const status = params.row.taskStatus;
                        // 定义样式对象
                        const styleObj = {
                            color: 'red',
                        };
                        return h('span', { style: styleObj }, taskWarning);
                    }
                },
                {
                    title: '计算资源',
                    key: 'computationResource',
                    width: 120,
                },
                {
                    title: '提交时间',
                    key: 'submissionTime',
                    width: 200,
                    render: (h, params) => {
                        const time = params.row.submissionTime;
                        return h('span', formatTimestamp(time, "YYYY:MM:DD HH:mm:ss"));
                    }
                },
                {
                    title: '运行时间',
                    key: 'alarmRunningTime',
                    width: 200,
                    render: (h, params) => {
                        const runTime = params.row.alarmRunningTime;
                        if (runTime > 0) {
                            return h('span', `${runTime} /s`);
                        } else {
                            return h('span', `${runTime}`);
                        }
                    }
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: 'left'
                }

            ],
            historyData: [
                {
                    taskName: "Quest KACE Systems ukibs",
                    taskStatus: 0,
                    taskWarning: "系统异常",
                    computationResource: 2,
                    submissionTime: 1639566415000,
                    alarmRunningTime: 16,

                },
            ],
            historyLoading: false,

            // 页面通用
            PageSizeOpts: [10, 20, 30, 40],

            workStatusModel: 0,
            workStatusList: [
                {
                    value: 0,
                    label: "等待开始"
                },
                {
                    value: 1,
                    label: "正在运行"
                },
                {
                    value: 2,
                    label: "任务停止"
                },
                {
                    value: 3,
                    label: "暂停"
                },
                {
                    value: 4,
                    label: "任务完成"
                },
                {
                    value: 5,
                    label: "故障"
                },
            ],
        }
    },
    methods: {
        nowPageChange(index) {
            this.nowPageChangeCurrent = index;
            // 调用接口刷新data
        },
        handleMoveUp(row) {

        },
        handleMoveDown(row) { },


        historyPageChange(index) {
            this.historyPageChangeCurrent = index;
            // 调用接口刷新data
        },
    }
}
</script>

<style lang="less" scoped>
.workManagement {
    .contnetTopCardStyle {
        display: flex;
        justify-content: space-between;

        .topLeft {
            Button {
                margin: 0 8px;
            }
        }

        .topRight {
            .ivu-select {
                margin: 0 8px;
            }

            .ivu-input-wrapper {
                margin: 0 8px;
            }

            Button {
                margin: 0 8px;
            }
        }
    }

    .tableFoot {
        display: flex;
        justify-content: space-between;
        margin: 8px;


    }


}
</style>